<template>
    <div class="collect">
          <div class="collect_menu">
                <div class="menu_go_back" @click="go_back"></div>
                <div class="menu_name">我的收藏</div>
                <div class="menu_manage" @click="manage" v-text="btnText">管理</div>
        </div>   
        <div class="collect_list">
            <ul :class="[flag ? 'collect_uls': 'collect_ul']">
                <li>
                    <div class="collect_check"  v-if="!flag" @click="change"></div>
                    <div class="collect_img"><img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg"></div>
                    <div :class="[flag ? 'collect_infos': 'collect_info']" >
                        <div class="collect_title">[销售冠军]隔离美白个喷美白防喷雾</div>
                        <div class="collect_aword">奖 ¥2.14</div>
                        <div class="collect_nav">
                            <div class="price_now">
                                <small>¥</small><span>18</span> 券后
                            </div>
                            <div class="price_old">23.00</div>
                            <div class="collect_sale" v-if="flag">销量34567</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="collect_checked"  v-if="!flag" @click="change"></div>
                    <div class="collect_img"><img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg"></div>
                    <div :class="[flag ? 'collect_infos': 'collect_info']" >
                        <div class="collect_title">[销售冠军]隔离美白个喷美白防喷雾</div>
                        <div class="collect_aword">奖 ¥2.14</div>
                        <div class="collect_nav">
                            <div class="price_now">
                                <small>¥</small><span>18</span> 券后
                            </div>
                            <div class="price_old">23.00</div>
                            <div class="collect_sale" v-if="flag">销量34567</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="collect_check"  v-if="!flag" @click="change"></div>
                    <div class="collect_img"><img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg"></div>
                    <div :class="[flag ? 'collect_infos': 'collect_info']" >
                        <div class="collect_title">[销售冠军]隔离美白个喷美白防喷雾</div>
                        <div class="collect_aword">奖 ¥2.14</div>
                        <div class="collect_nav">
                            <div class="price_now">
                                <small>¥</small><span>18</span> 券后
                            </div>
                            <div class="price_old">23.00</div>
                            <div class="collect_sale" v-if="flag">销量34567</div>
                        </div>
                    </div>
                </li>  
                <li>
                    <div class="collect_check"  v-if="!flag" @click="change"></div>
                    <div class="collect_img"><img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg"></div>
                    <div :class="[flag ? 'collect_infos': 'collect_info']" >
                        <div class="collect_title">[销售冠军]隔离美白个喷美白防喷雾</div>
                        <div class="collect_aword">奖 ¥2.14</div>
                        <div class="collect_nav">
                            <div class="price_now">
                                <small>¥</small><span>18</span> 券后
                            </div>
                            <div class="price_old">23.00</div>
                            <div class="collect_sale" v-if="flag">销量34567</div>
                        </div>
                    </div>
                </li> 
                <li>
                    <div class="collect_check"  v-if="!flag" @click="change"></div>
                    <div class="collect_img"><img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg"></div>
                    <div :class="[flag ? 'collect_infos': 'collect_info']" >
                        <div class="collect_title">[销售冠军]隔离美白个喷美白防喷雾</div>
                        <div class="collect_aword">奖 ¥2.14</div>
                        <div class="collect_nav">
                            <div class="price_now">
                                <small>¥</small><span>18</span> 券后
                            </div>
                            <div class="price_old">23.00</div>
                            <div class="collect_sale" v-if="flag">销量34567</div>
                        </div>
                    </div>
                </li>       
                <li>
                    <div class="collect_check"  v-if="!flag" @click="change"></div>
                    <div class="collect_img"><img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg"></div>
                    <div :class="[flag ? 'collect_infos': 'collect_info']" >
                        <div class="collect_title">[销售冠军]隔离美白个喷美白防喷雾</div>
                        <div class="collect_aword">奖 ¥2.14</div>
                        <div class="collect_nav">
                            <div class="price_now">
                                <small>¥</small><span>18</span> 券后
                            </div>
                            <div class="price_old">23.00</div>
                            <div class="collect_sale" v-if="flag">销量34567</div>
                        </div>
                    </div>
                </li>                                                                                         
            </ul>
            <div class="collect_all"  v-if="!flag">
                <div class="all_check">
                    <div class="collect_all_check"></div>
                    <div class="all_name">全选</div>
                </div>
                <div class="all_del">删除</div>
            </div>   
        </div> 

    </div>
</template>
<script>
    export default {
        name: 'Collect',
        data () {
             return {
                flag:true,
                btnText:"管理",
             }
        },
        methods:{
            go_back(){
              this.$router.go(-1);
            },
            manage(){
                 this.flag = !this.flag 
                 if(this.flag==true){ 
                     this.btnText = "管理" 
                 }else if(this.flag==false) { 
                     this.btnText = "完成" 
                 } 
            },
            change(){
                console.log("收藏页面")
            },
        },
    }
</script>
<style scoped>
/* .collect{width:100%;height:100%;} */
.collect_menu{width:100%;height:98px;line-height:98px;background:#FFE514;display: flex;flex-wrap: wrap;justify-content:space-between;justify-items: center;text-align: justify;}
.collect_menu .menu_go_back{width:48px;height:48px;background:url(/static/images/team_go_back.png) no-repeat left center;background-size:100% 100%;margin-left:2%;margin-top:24px;}
.collect_menu .menu_name{font-size:32px;color:#333334;font-weight:600;}
.collect_menu .menu_manage{font-size:32px;color:#333334;margin-right:26px;}
.collect_list .collect_ul{padding-bottom:130px;} 
.collect_list .collect_uls{padding-bottom:30px;} 
.collect_list li{display: flex;flex-wrap: wrap;justify-content:space-between;justify-items: center;text-align: justify;margin-top:22px;}
.collect_list li .collect_checked{width:40px;height:40px;background:url(/static/images/checked.png) no-repeat center center;background-size:100% 100%;margin-left:34px;margin-top:122px;}
.collect_list li .collect_check{width:40px;height:40px;background:url(/static/images/check.png) no-repeat center center;background-size:100% 100%;margin-left:34px;margin-top:122px;}
.collect_list li .collect_img{width:284px;height:284px;margin-left:26px;}
.collect_list li .collect_img img{width:100%;border-radius:40px;}
.collect_info{width:300px;margin-right:28px;}
.collect_infos{width:392px;margin-right:28px;}
.collect_list  .collect_title{word-wrap:break-word;color:#000000;font-size:28px;font-weight:600;padding-top:8px;}
.collect_list  .collect_aword{color:#FF0000;width:128px;height:32px;font-size:24px;border:2px solid #FF0000;border-radius:4px;text-align:center;margin-top:74px;}
.collect_nav{display: flex;align-content: flex-start;margin-top:24px;}
.collect_nav .price_now{font-size:28px;color:#FF0000;padding-left:4px;}
.collect_nav .price_now span{font-weight:bold;}
.collect_nav .price_old{font-size:24px;text-decoration: line-through;color:#9B9B9B;line-height:36px;margin-left:16px;}
.collect_nav .collect_sale{font-size:24px;color:#9B9B9B;margin-left: 58px;}
.collect_all{display:flex; flex-direction: row;justify-content: space-between;width:100%;height:98px;line-height:98px;border-top:2px solid #F2F2F2;position: fixed;bottom:0;background:#FFF;}
.collect_all .all_check{width:128px;height:40px;line-height:40px;margin-top:30px;display:flex; flex-direction: row;justify-content: space-between;margin-left:34px;}
.collect_all .all_check .collect_all_check{width:40px;height:40px;background:url(/static/images/check.png) no-repeat center center;background-size:100% 100%;}
.collect_all .all_check .all_name{font-size:28px;color:#333334;}
.collect_all .all_del{width:166px;height:56px;line-height:56px;border-radius:28px;background:#FFE514;text-align:center;font-size:28px;color:#333334;margin-top:22px;margin-right:42px;}
</style>